<template>
  <div id="ForumDetail" class="ForumDetail">
     <div class="MainList " id="MainList">
        <div class="ListPage">
            <el-pagination layout="prev, pager, next" :page-count="all" :page-size="5" :current-page.sync="cur" @current-change="monitor"></el-pagination>
            <router-link class="goBack" to><span @click="$router.back(-1)"><img src="../images/icon14.png"/>返回主页</span></router-link>
        </div>
        <div class="ListContent">
            <div class="ContentHead" id="ContentHead">
              <el-row>
                <el-col :span="16">
                  <div class="grid-content">
                    <h5 :alt="DetailLandlord.title">{{DetailLandlord.title}}</h5>
                  </div>
                </el-col>
                <el-col :span="3" :offset="1">
                  <div class="ContentHead-Moudle grid-content">
                    <el-button size='mini' @click="onLandlord()">{{DetailLandlord.onLandlord === true?'取消只看楼主':'只看楼主'}}</el-button>
                  </div>
                </el-col>
                <el-col :span="1" :offset="1">
                  <div class="ContentHead-Moudle grid-content">
                    <div v-show="DetailLandlord.is_collected===true">
                      <el-button type="success" size='mini' @click="collect()" icon="el-icon-star-off" circle></el-button>
                    </div>
                    <div v-show="DetailLandlord.is_collected!==true">
                      <el-button type="warning" size='mini' @click="collect()" icon="el-icon-star-off" circle></el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="ContentHead-Moudle grid-content">
                    <el-button type="primary" size='mini' icon="el-icon-s-comment" @click="goBottom()" circle></el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
            <ul class="ListContentUl">
                <li :class="['ListContentUlLi']" v-show="isPageOne">
                    <img src="../images/lz.png" class="userLz"/>
                    <div class="ListItems">
                      <el-row>
                          <el-col :span="3">
                            <div class="ListItemsLeft grid-content">
                              <div class="UserInfo">
                                <div class="UserInfo-Pic"><img :src="DetailLandlord.user_photo" :alt="DetailLandlord.user_nickname"/></div>
                                <span class="UserInfo-Name" :title="DetailLandlord.user_nickname">{{DetailLandlord.user_nickname}}</span>
                                <span class="UserInfo-Admin" v-show="DetailLandlord.is_post_by_admin">管理员</span>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="9">
                            <div class="ListItemsRight grid-content">
                                <div class="TextContent" v-html="DetailLandlord.content"></div>
                                <div class="ListItems-Detail-img">
                                    <div class="JDICont">
                                      <div class="imgList" v-for="(img, index) in DetailLandlord.images" :key="index" @click="ShowBigPic($event,index,i,1)" >
                                                <div class="imgfd"></div>
                                                <img :src="img" alt="点击加载图片"/>
                                      </div>
                                    </div>
                                    <div class="ListThumb" v-if="DetailLandlord.images != ''" v-show="DetailLandlord.flag">
                                      <div class="thumbHead"><a href="javascript:;" @click="hidePic($event,i,1)"><i></i>收起</a> </div>
                                      <div class="thumbWarp">
                                          <div :class="['thumbWarpList',{none: 0 != index }]" v-for="(img, index) in DetailLandlord.images" :key="index">
                                            <div class="thumbPrev" v-if="index != 0" :data-cur="index-1" @click="thumbPrev(index,i,1)"></div>
                                            <div class="thumbsx" @click="hidePic($event,i,1)"></div>
                                            <img :src="img" alt="刷新查看" />
                                            <div class="thumbNext" v-if="DetailLandlord.images.length-1 != index" :data-cur="index+1" @click="thumbNext(index,i,1)"></div>
                                          </div>
                                      </div>
                                    </div>
                                </div>
                                <div :class="['ClickUp',{'ClickOn' : DetailLandlord.is_voted === true}]" @click="ListVote()">
                                    <p></p>
                                    <p>{{DetailLandlord.like_count}}</p>
                                </div>
                                <div class="ItemsModle">
                                    <div class="ItemsModle-Head">
                                        <div class="Head-Floor"><span>楼主</span>{{DetailLandlord.created_at}}</div>
                                        <div class="Head-Moudle">
                                          <ol style="list-style-type: none">
                                            <li v-if="DetailLandlord.is_admin">
                                                <span class="PostManagement" @click="showPostManage()">帖子管理<i :class="{'rotate':isPostManage === true}"></i></span>
                                                <div class="adminlist" v-show="isPostManage">
                                                    <p @click="isAdmin(1)">{{DetailLandlord.elite === false ? '加精' : '取消加精'}}</p>
                                                    <p @click="isAdmin(3)">{{DetailLandlord.is_official == false ? '设为官方贴':'取消官方贴'}}</p>
                                                </div>
                                            </li>
                                            <li v-show="DetailLandlord.delete_private"><span class="Head-Moudle-Del" @click="isAdmin(2)">删除</span></li>  
                                            <li @click="goBottom()"><span class="Head-Moudle-Reply">回复</span></li>
                                          </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </el-col>
                      </el-row>
                    </div>
                </li>
                 <li :class="['ListContentUlLi']" v-for="(list , temp) in DetailList" :key="temp" >
                   <div :name="list.id">
                    <a :name="list.id"></a>
                    <img src="../images/lz.png" class="userLz" v-show="list.is_owner"/>
                    <div class="ListItems">
                      <el-row>
                        <el-col :span="3">
                          <div class="ListItemsLeft grid-content">
                            <div class="UserInfo">
                              <div class="UserInfo-Pic"><img :src="list.user_photo" :alt="list.user_nickname"/></div>
                              <span class="UserInfo-Name">{{list.user_nickname}}</span>
                              <span class="UserInfo-Admin" v-show="list.is_post_by_admin">管理员</span>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="9">
                          <div class="ListItemsRight grid-content">
                              <div class="TextContent" v-html="list.content"></div>
                                      <div class="ListItems-Detail-img">
                                          <div class="JDICont">
                                            <div class="imgList" v-for="(img, index) in list.images" :key="index" @click="ShowBigPic($event,index,temp,0)" >
                                                <div class="imgfd"></div>
                                                <img :src="img" alt="点击加载图片"/>
                                            </div>
                                          </div>
                                          <div class="ListThumb" v-if="list.images != ''" v-show="list.flag">
                                            <div class="thumbHead"><a href="javascript:;" @click="hidePic($event,temp,0)"><i></i>收起</a> </div>
                                            <div class="thumbWarp">
                                                <div :class="['thumbWarpList',{none: 0 != index }]" v-for="(img, index) in list.images" :key="index">
                                                  <div class="thumbPrev" v-if="index != 0" :data-cur="index-1" @click="thumbPrev(index,temp,0)"></div>
                                                  <div class="thumbsx" @click="hidePic($event,temp,0)"></div>
                                                  <img :src="img" alt="刷新查看" />
                                                  <div class="thumbNext" v-if="list.images.length-1 != index" :data-cur="index+1" @click="thumbNext(index,temp,0)"></div>
                                                </div>
                                            </div>
                                          </div>
                                      </div>
                              <div class="ItemsModle">
                                  <div class="ItemsModle-Head">
                                      <div class="Head-Floor"><span>{{list.position}}楼</span>{{list.created_at}}</div>
                                      <div class="Head-Moudle ">
                                        <ol style="list-style-type: none">
                                          <li @click="JReply(list.id,list.userId,list.user_nickname,temp)"><span class="Head-Moudle-Del">回复</span></li>
                                          <li v-show="list.delete_private" @click="isAdmin(3, list.id)"><span class="Head-Moudle-Del">删除</span></li>
                                          <li >
                                              <span class="Head-Moudle-Reply" v-show="list.replay" @click="ShowMoudleList(temp, list.reply_num, list.id)">展开回复<b v-if="list.reply_num > 0">（{{list.reply_num}}）</b></span>
                                              <span class="Head-Moudle-Reply" v-show="!list.replay" @click="HideMoudleList(temp)">收起回复<b v-if="list.reply_num > 0">（{{list.reply_num}}）</b></span>
                                          </li>
                                          <li><span :class="['Head-Moudle-Praise',{'Head-Moudle-Praise-On' : list.is_voted === true}]" @click="CommentVote(list.id, temp, list.is_voted)">{{list.like_num}}</span></li>
                                        </ol>
                                      </div>
                                  </div>
                                  <div class="ItemsMoudle-List" v-show="!list.replay">
                                      <div class="ItemsMoudle-ListContent">
                                          <ul class="ItemsMoudle-ListContent-Ul"  v-if="list.reply_num > 0">
                                              <li class="ItemsMoudle-ListContent-Li" v-for="(Mlist, Mtemp) in list.replies" :data-repliesId="Mlist.id" :key="Mtemp">
                                                  <div class="Itemsmoude-items">
                                                    <el-row>
                                                      <el-col :span="3">
                                                        <div class="Itemsmoude-items-Pic"><img :src="Mlist.user_photo" :alt="Mlist.user_nickname"/></div>
                                                      </el-col>
                                                      <el-col :span="21">
                                                        <div class="Itemsmoude-itemsContent">
                                                          <div class="MoudleItems-h5">
                                                              <span><a href="javascript:;">{{Mlist.user_nickname}}：</a>
                                                                    <b style="float:left">{{ Mlist.to_user_id !== Mlist.comment_user_id ? '回复' : '' }} </b>
                                                                    <a href="javascript:;" v-if="Mlist.to_user_id != Mlist.comment_user_id" class="twouser" >{{Mlist.to_user_nickname}}：</a>
                                                                    {{Mlist.content}}
                                                              </span>
                                                          </div>
                                                          <div class="MoudleItems-info">
                                                              <span>{{Mlist.created_at}}</span>
                                                              <el-button type="text" size="mini" @click="JMoudleReply(list.id,Mlist.user_id, Mlist.user_nickname,temp)">回复</el-button>
                                                          </div>
                                                        </div>    
                                                      </el-col>
                                                    </el-row> 
                                                  </div>
                                              </li>
                                          </ul>
                                          <div class="ItemsMoudle-ListContent-Jet">
                                                <el-button type="text" size="small" class="ItemsMoudle-List-More" v-show="list.reply_num > 5 && list.more === true" @click="showMore(list.id, 1, 10, temp)">查看更多</el-button>
                                                <div class="ItemsMoudle-Page" v-show="list.reply_num > 5 && list.more === false">
                                                    <ul>   
                                                        <li><a :class="setButtonClass(0,temp)" @click="prvePage(list.current,list.id,temp)"><img src="../images/prev.png" alt="<"/></a></li>   
                                                        <li v-for="(flag,i) in list.allpage" :key="i" :class="[{ active: list.current === flag },{point:flag < 1}]" :data-flag="flag" :data-cur="list.current">   
                                                            <a @click="btnClick(flag,temp,list.id)">{{ flag &lt; 1 ? "..." : flag }}</a>  
                                                        </li>   
                                                        <li class="next"><a :class="setButtonClass(1,temp)" @click="nextPage(list.current,list.all,list.id,temp)"><img src="../images/next.png" alt=">"/></a></li>   
                                                    </ul> 
                                                </div>
                                          </div>
                                      </div>
                                      <!-- list.moudleListInput -->
                                      <div class="ItemsMoudle-List-Input" v-show="true">
                                          <div class="ItemsMoudle-List-Input-Box">
                                              <input type="text" :placeholder="list.UserNickName" :id="'J'+list.id" maxLength="150" autofocus="autofocus"/>
                                          </div>
                                          <div class="ItemsMoudle-List-Input-Set">
                                              <el-button type="primary" size="mini" @click="postComment(list.id,temp)">发表</el-button>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                   </div>
                </li>
            </ul>
        </div>
        <div class="ListPage">
            <el-pagination layout="prev, pager, next" :page-count="all" :page-size="5" :current-page.sync="cur" @current-change="monitor"></el-pagination>
            <router-link class="goBack" to><span @click="$router.back(-1)"><img src="../images/icon14.png"/>返回主页</span></router-link>
        </div>
        <div class="LidtEditor " id="LidtEditor">
          <div class="Editor">
            <div id="editorElem" style="text-align:left">
            </div>
            <el-button type="primary" size="mini" @click="postComment2()">发表</el-button>
          </div>
        </div>
     </div>
  </div>

</template>

<script>
  import E from 'wangeditor'
  import axios from 'axios'
  export default {
    name: 'ForumDetail',
    components: {
    },
    props:['pid'],

    ready () {
      this.requestData()
    },
    destroyed () {
    },
    data () {
      return {
        postImgs: [],
        circleId: '',
        postId: '',
        DetailLandlord: [],
        DetailList: [],
        isSiH: false,
        cur: 1,
        all: 1,
        Pagesize: 10,
        isJump: true,
        listId: '',
        userId: '',
        content: '',
        username: '',
        isPageOne: true,
        isOnLandlord: 0,
        editorContent: '',
        scrolled: '',
        isPostManage: false,
        isPostManageMask: false,
        isPopInfo: {
          isPopShow: false,
          isPopTsShow: 0,
          isMaskShow: false,
          commentId: ''
        },
        replayInfo: {
          cid: -1,
          uid: -1,
          rid: -1,
          content: ''
        },
        editor:'',
      }
    },
    methods: {
      hidePic: function (event, temp, isLord) {
        if(isLord==1){
          this.DetailLandlord['flag'] = false
        }else{
          this.DetailList[temp]['flag'] = false
        }
      },
      thumbNext: function (index, temp, isLord) { // 缩略图
        if(isLord==1){
          this.DetailLandlord['showindex'] = index + 1
        }else{
          this.DetailList[temp]['showindex'] = index + 1 
        }
      },
      thumbPrev: function (index, temp, isLord) {
        if(isLord==1){
          this.DetailLandlord['showindex'] = index - 1
        }else{
          this.DetailList[temp]['showindex'] = index - 1
        }
      },
      ShowBigPic: function (event, index, temp, isLord) {
        if(isLord==1){
          this.DetailLandlord['flag'] = true
          this.DetailLandlord['showindex'] = index
        }else{
          this.DetailList[temp]['flag'] = true
          this.DetailList[temp]['showindex'] = index
        }
      },
      isAdmin: function (temp, data) { // 删除 置顶 加精
        this.isPopInfo.isMaskShow = true
        this.isPopInfo.isPopShow = true
        this.isPostManageMask = false
        this.isPostManage = false
        if (temp === 0) { // 置顶
          this.isPopInfo.isPopTsShow = 0
        } else if (temp === 1) { // 加精
          this.isPopInfo.isPopTsShow = 1
        } else if (temp === 2) { // 删除主贴
          this.isPopInfo.isPopTsShow = 2
        } else if (temp === 3) { // 删除评论
          this.isPopInfo.isPopTsShow = 3
          this.isPopInfo.commentId = data
        } else if (temp === 4) { // 官方贴
          this.isPopInfo.isPopTsShow = 4
        }
      },
      showPostManage: function () { // 显示管理列表
        if (this.isPostManage === false) {
          this.isPostManage = true
          this.isPostManageMask = true
        } else {
          this.isPostManage = false
          this.isPostManageMask = false
        }
      },
      delComment: function (commentId) { // 删除评论
        this.monitor(this.cur)
        console.log(commentId)
      },
      getContent: function (text) { // 发送评论
        var _this = this
        document.getElementsByClassName('w-e-text')[0].blur()
        if (text !== '') {
          // setTimeout(function () {
          //   document.getElementsByClassName('w-e-text')[0].focus()
          //   _this.postHtml(_this.postId, _this.editorContent)
          // }, 10)
          _this.postHtml(_this.postId, text)
          // console.log(_this.editor.txt.html())
        }
      },
      postHtml: function (postId, editorContent) {
        console.log(postId)
        console.log(editorContent)
        // var vm = this
        // vm.$http.post('//moment.snail.com/api/v1/comment/comment', {
        //   post_id: postId,
        //   content: editorContent
        // },
        // {emulateJSON: true}).then((res) => {
        //   if (res.data.code === 200) {
        //     this.monitor(this.all)
        //     document.getElementById('postErrts').style.display = 'none'
        //     document.getElementsByClassName('w-e-text')[0].innerHTML = '<p><br/></p>'
        //     this.editorContent = 'no'
        //     this.goBottom()
        //   } else {
        //     document.getElementById('postErrts').style.display = 'inline-block'
        //     document.getElementById('postErrts').innerHTML = res.data.message
        //   }
        // }, (error) => { console.log(error) })
        this.monitor(this.all)
        document.getElementById('postErrts').style.display = 'none'
        document.getElementsByClassName('w-e-text')[0].innerHTML = '<p><br/></p>'
        this.editorContent = 'no'
        this.goBottom()
      },
      collect: function(){
        var that = this
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/postdetail/likepost?uid=1&pid='+this.pid,      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          timeout: 100000
        }).then(function (response) {
            that.RefreshHeadInfo()
            that.DetailLandlord.is_collected=response.data.data
            
        })
      },
      goBottom: function () {
        const windheight = document.documentElement.scrollHeight
        const gotoTop = function () {
          var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
          currentPosition += 120
          if (currentPosition < windheight - 1600) {
            window.scrollTo(0, currentPosition)
          } else {
            window.scrollTo(0, windheight)
            clearInterval(timer)
            timer = null
          }
        }
        var timer = setInterval(gotoTop, 20)
      },
      onLandlord: function () { // 只看楼主
        if (this.DetailLandlord['onLandlord'] === true) {
          this.DetailLandlord['onLandlord'] = false // 全部
          this.isOnLandlord = 0 // 只看楼主按钮标识
          this.cur = 1  // 切换分页为第一页
          this.isPageOne = true // 将楼主信息显示
          this.LoadHtml(1, 0)
        } else { // 只看楼主
          this.DetailLandlord['onLandlord'] = true
          this.isOnLandlord = 1
          this.cur = 1
          this.isPageOne = true
          this.LoadHtml(1, 1)
        }
      },
      monitor: function (page) { // 分页
        this.cur = page
        this.LoadHtml(page, this.isOnLandlord)
        if (page > 1) {
          this.isPageOne = false // 第二页 楼主不现实
        } else {
          this.isPageOne = true
        }
      },
      ShowMoudleList: function (temp, num, commentUserId) { // 显示评论列表
        this.DetailList[temp]['moudleListInput'] = true
        this.DetailList[temp]['replay'] = false
        this.DetailList[temp]['UserNickName'] = ''
        this.DetailList[temp]['listId'] = commentUserId
        this.DetailList[temp]['userId'] = ''
      },
      HideMoudleList: function (temp) { // 关闭评论列表
        this.DetailList[temp]['replay'] = true
        this.DetailList[temp]['UserNickName'] = ''
        this.DetailList[temp]['moudleListInput'] = false
      },
      JMoudleReply: function (cid, rid, name, temp) { // 回复
          this.DetailList[temp]['moudleListInput'] = true
          this.DetailList[temp]['UserNickName'] = '回复：' + name
          this.DetailList[temp]['listId'] = name
          this.DetailList[temp]['userId'] = rid
          setTimeout(function () {
            document.getElementById('J' + cid).focus()
          }, 200)
        this.replayInfo.rid=rid
        this.replayInfo.uid= 1
        this.replayInfo.cid=cid
        this.replayInfo.content=document.getElementById('J' + cid).value
      },
      //回复层主的函数
      JReply: function (cid,uid, name,temp) { // 我也说一句
        this.DetailList[temp]['moudleListInput'] = true
        this.DetailList[temp]['UserNickName'] = '回复层主：'+name
        this.DetailList[temp]['listId'] = cid
        this.DetailList[temp]['userId'] = ''
        setTimeout(function () {
          document.getElementById('J' + cid).focus()
        }, 200)
        this.replayInfo.rid=-1
        this.replayInfo.uid= 1
        this.replayInfo.cid=cid
        this.replayInfo.content=document.getElementById('J' + cid).value
      },
      CommentVote: function (commentId, temp, isVote) { // 评论投票
        console.log(isVote,commentId)
        // if (document.getElementById('pdLogin').value === 'true') {
        //   var vm = this
        //   vm.$http({
        //     url: '//moment.snail.com/api/v1/comment/vote',
        //     method: 'jsonp',
        //     params: {
        //       'comment_id': commentId
        //     },
        //     jsonp: 'callback',
        //     emulateJSON: true,
        //     ContentHeaders: {
        //       'Content-Type': 'x-www-from-urlencoded'
        //     }
        //   }).then(function (res) {
        //     if (res.body.operation === 'minus') {
        //       this.DetailList[temp]['is_voted'] = false
        //       this.DetailList[temp]['like_num'] = this.DetailList[temp]['like_num'] - 1
        //     } else if (res.body.operation === 'plus') {
        //       this.DetailList[temp]['is_voted'] = true
        //       this.DetailList[temp]['like_num'] = this.DetailList[temp]['like_num'] + 1
        //     }
        //   })
        // } else {
        //   this.ShowLoginPop()
        // }
        this.DetailList[temp]['is_voted'] = false
        this.DetailList[temp]['like_num'] = this.DetailList[temp]['like_num'] - 1
      },
      ListVote: function () { // 楼主贴投票
        var that = this
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/postdetail/likepost?uid=1&pid='+this.pid,      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          timeout: 100000
        }).then(function (response) {
            console.log(response.data);
            that.RefreshHeadInfo()
            that.DetailLandlord.is_voted=response.data.data
            
        })
      },
      /**
       * data: 加载的页数
       * flag： 1只看楼主 0全都看
       */
      LoadHtml: function (page, flag) { // 刷新HTML 只看楼主
        var that = this
        var only_owner = false
        if(flag==0){
          only_owner = false
        }else{
          only_owner = true
        }
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/postdetail/get',      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          data:{
            uid: 1,
            pid:this.pid,
            page: page,
            only_owner: only_owner,
          },
          timeout: 100000
        }).then(function (response) {
          var data = response.data.data
          for (var i in data.list) {
            data.list[i]['UserNickName'] = ''
            data.list[i]['moudleListInput'] = false
            data.list[i]['more'] = true
            if (data.list[i].reply_num > 0) {
              data.list[i]['replay'] = false
            } else {
              data.list[i]['replay'] = true
            }
            if (data.list[i].replies !== undefined) {
              if (data.list[i].replies.length > 0) {
                data.list[i].replies = data.list[i].replies.splice(0, 5)
              }
            }
          }
          that.DetailList = data.list
          that.all = data.totalPage
          if (data.totalPage === 0) {
            that.all = 1
          }
          if (that.cur > 1) {
            that.isPageOne = false // 第二页 楼主不显示
          } else {
            that.isPageOne = true
          }
        })
      },
      RefreshHeadInfo: function () { // 刷新楼主投票
        var that = this
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/postdetail/getpost?pid='+this.pid,      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          // data:{
          //   pid:this.pid,
          // },
          timeout: 100000
        }).then(function (response) {
          var resData = response.data.data
          that.DetailLandlord = resData
          that.DetailLandlord['onLandlord'] = false
        })
      },
      showMore: function (commentid, page, pagesize, temp) { // 显示评论列表
        var that = this
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/postdetail/showreplys?cid='+commentid+'&page='+page,      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          // data:{
          //   pid:this.pid,
          // },
          timeout: 100000
        }).then(function (response) {
          var resData = response.data.data
          that.DetailList[temp]['replies'] = resData.replies
          that.DetailList[temp]['current'] = resData.page
          that.DetailList[temp]['more'] = false
          that.DetailList[temp]['allpage'] = resData.totalPage
        })
        
        
      },
      // 页码点击事件
      btnClick: function (current, index, postId) {
        if (current < 1) return
        if (current !== this.DetailList[index].current) {
          this.DetailList[index].current = current
          this.showMore(postId, current, 10, index)
        }
      },
      // 下一页
      nextPage: function (current, allpage, postId, index) {
        if (current >= allpage) return
        this.btnClick(current + 1, index, postId)
      },
      // 上一页
      prvePage: function (current, postId, index) {
        if (current <= 1) return
        this.btnClick(current - 1, index, postId)
      },
      // 设置按钮禁用样式
      setButtonClass: function (isNextButton, index) {
        if (isNextButton) {
          return this.DetailList[index].current >= this.DetailList[index].allpage ? 'page-button-disabled' : ''
        } else {
          return this.DetailList[index].current <= 1 ? 'page-button-disabled' : ''
        }
      },
      //list.id, temp
      //id, temp
      postComment: function (cid,temp) { // 发表评论
        var content = document.getElementById('J' + cid).value
        this.replayInfo.content = content
        if(this.replayInfo.cid!=-1)
        {
          if(this.replayInfo.rid==-1){
            axios({
              method: 'post',
              baseURL: '/api',
              url: '/comment/reply/tocomment',      
              dataType: 'jsonp',
              headers: { 'Access-Control-Allow-Origin':'*' },
              responseType: 'json',
              data:{
                cid:this.replayInfo.cid,
                uid:1,
                content:this.replayInfo.content
              },
              timeout: 100000
            }).then(function (response) {
              console.log(response.data)
            })
          }
          else{
            axios({
              method: 'post',
              baseURL: '/api',
              url: '/comment/reply/toreply',      
              dataType: 'jsonp',
              headers: { 'Access-Control-Allow-Origin':'*' },
              responseType: 'json',
              data:{
                cid:this.replayInfo.cid,
                rid:this.replayInfo.rid,
                uid:1,
                content:this.replayInfo.content
              },
              timeout: 100000
            }).then(function (response) {
              console.log(response.data)
            })
          }
        }
        
        this.showMore(cid, 1, 10, temp)
        document.getElementById('J' + cid).value = ''
        this.DetailList[temp].reply_num = this.DetailList[temp].reply_num + 1
        this.replayInfo = {
          rid:-1,
          uid:-1,
          cid:-1,
          content:''
        }
          
      },
      postComment2: function () { // 发表评论
        console.log(this.postImgs)
        console.log(this.editor.txt.text())
        
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/comment/send',      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          data:{
            pid:this.pid,
            uid:1,
            pictures: this.postImgs,
            content: this.editor.txt.text(),
          },
          timeout: 100000
        }).then(function (response) {
          console.log(response.data)
        })
        this.postImgs = []
        this.monitor(this.cur)
        this.editor.txt.clear()
      }
    },
    computed: {
    },
    created: function () {
      this.postImgs = []
      var that = this
      this.cur = 1
      //this.cur = this.$route.params.onPage
      axios({
        method: 'post',
        baseURL: '/api',
        url: '/postdetail/get',      
        dataType: 'jsonp',
        headers: { 'Access-Control-Allow-Origin':'*' },
        responseType: 'json',
        data:{
          uid: 1,
          pid:this.pid,
          page:1,
          only_owner:false,
        },
        timeout: 100000
      }).then(function (response) {
        var data = response.data.data
         for (var i in data.list) {
          data.list[i]['UserNickName'] = ''
          data.list[i]['moudleListInput'] = false
          data.list[i]['more'] = true
          if (data.list[i].reply_num > 0) {
            data.list[i]['replay'] = false
          } else {
            data.list[i]['replay'] = true
          }
          if (data.list[i].replies !== undefined) {
            if (data.list[i].replies.length > 0) {
              data.list[i].replies = data.list[i].replies.splice(0, 5)
            }
          }
        }
        that.DetailList = data.list
        that.all = data.totalPage
        if (data.totalPage === 0) {
          that.all = 1
        }
        if (that.cur > 1) {
          that.isPageOne = false // 第二页 楼主不显示
        } else {
          that.isPageOne = true
        }
      })

      axios({
        method: 'post',
        baseURL: '/api',
        url: '/postdetail/getpost?pid='+this.pid,      
        dataType: 'jsonp',
        headers: { 'Access-Control-Allow-Origin':'*' },
        responseType: 'json',
        // data:{
        //   pid:this.pid,
        // },
        timeout: 100000
      }).then(function (response) {
        var resData = response.data.data
        that.DetailLandlord = resData
        that.DetailLandlord['onLandlord'] = false
      })
          

    },

    mounted: function () {
      var that = this;
      this.editor = new E('#editorElem')
      this.editor.config.menus = [
        'link',
        'emoticon',
        'image',
        'code',
        'undo',
        'redo',
      ]
        // 插入网络图片的回调
      this.editor.config.linkImgCallback = function (src,alt,href) {
          
          that.postImgs.push(src)
          console.log(alt,href)
      }
      this.editor.create();
    }
  }
</script>

<style>

.ForumDetail {
  position: relative;
  width: 100%;
  font-family: "Microsoft YaHei";
}

.ForumDetail .h5 {
  height: 100%;
  display: inline-block;
  color: #000;
  text-align: left;
}

.ForumDetail .MainList {
  width: 100%;
  margin-left: 0px;
}

.ForumDetail .MainList .ListContent {
  position: relative;
}

.ForumDetail .ContentHead {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.ForumDetail .ContentHead h5 {
  margin-top: 10px;
  margin-left: 30px;
  display: inline-block;
  font-family: "Microsoft YaHei";
  text-align: left;
  font-size: 16px;
  color: #000;
  overflow: hidden;
  width: 90%;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.ForumDetail .ContentHead .ContentHead-Moudle{
  display: inline-block;
  text-align: center;
  font-size: 12px;
  color: #000;
  padding: 6px 8px;
  cursor: pointer;
}

.ListPage {
  position: relative;
  height: auto;
  background: #fff;
  margin-top: 5px;
  margin-bottom: 5px;
}

.ListPage .goBack {
  position: absolute;
  right: 13px;
  top: 10px;
  font-size: 12px;
  color: #0099e5;
}

.ListPage .goBack img {
  margin-right: 5px;
}

.ListContentUl {
  width: 95%;
  height: 100%;
  list-style-type: none;
  z-index: 3;
}

.ListContentUl .ListContentUlLi {
  position: relative;
  background: #fff;
  margin-bottom: 16px;
  margin-left: -40px;
  padding-top: 20px;
  padding-bottom: 15px;
}

.ListContentUl .ListContentUlLi .userLz {
  position: absolute;
  top: 0;
  left: 0;
}

.ListContentUl .ListContentUlLi .ListItems {
  width: 100%;
  height: auto;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.ListContentUl .ListItemsLeft {
  width: 90px;
  height: auto;

}

.ListContentUl .ListItemsLeft .UserInfo {
  width: 100%;
  height: 100%;
  text-align: center;
}

.ListContentUl .ListItemsLeft .UserInfo .UserInfo-Pic {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.ListContentUl .ListItemsLeft .UserInfo .UserInfo-Pic img {
  width: 60px;
  height: 60px;
}

.ListContentUl .ListItemsLeft .UserInfo span {
  display: inline-block;
  width: 100%;
  height: 15px;
  font-size: 12px;
  color: #4d4d4d;
  margin-top: 5px;
}

.ListContentUl .ListItemsLeft .UserInfo .UserInfo-Admin {
  font-size: 12px;
  width: 52px;
  height: 20px;
  line-height: 20px;
  background: #0099e5;
  color: #fff;
}

.ListContentUl .ListItemsRight {
  width: 565px;
  height: auto;
}

.ListContentUl .ListItemsRight .TextContent {
  margin-bottom: 30px;
  font-size: 14px;
  color: #404040;
  line-height: 1.714;
  text-align: left;
  min-height: 120px;
  word-break: break-all;
  padding-left: 5px;
}

.ListContentUl .ListItemsRight .TextContent > *, .ListContentUl .ListItemsRight .TextContent p > *, .ListContentUl .ListItemsRight .TextContent div > * {
  font-size: 14px !important;
  color: #404040 !important;
  line-height: 1.714 !important;
}

.ListContentUl .ListItemsRight .TextContent a {
  text-decoration: underline;
  color: #4c69ff !important;
  margin: 0 2px;
}

.ListContentUl .ListItemsRight .TextContent img {
  max-width: 100%;
  margin: 20px 0;
}

.ListContentUl .ListItemsRight .ClickUp {
  height: 48px;
  width: 98px;
  border: 1px solid #eeeeee;
  background-color: rgba(238, 238, 238, 0);
  border-radius: 25px;
  text-align: center;
  font-size: 14px;
  color: gray;
  cursor: pointer;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

.ListContentUl .ListItemsRight .ClickUp p {
  
  float: left;
  height: 15px;
}

.ListContentUl .ListItemsRight .ClickUp p:first-child {
  padding-left: 50px;
  margin-top: 15px;
  margin-bottom: 5px;
  background: url(../images/icon7.png) no-repeat center;
}

.ListContentUl .ListItemsRight .ClickUp:hover {
  border-color: #00aaff;
}

.ListContentUl .ListItemsRight .ClickUp:hover p {
  color: #00aaff;
}

.ListContentUl .ListItemsRight .ClickUp:hover p:first-child {
  background: url(../images/icon8.png) no-repeat center;
}

.ListContentUl .ListItemsRight .ClickOn {
  border-color: transparent;
  background: url(../images/icon9.png) no-repeat center;
}

.ListContentUl .ListItemsRight .ClickOn p {
  color: #fff;
}

.ListContentUl .ListItemsRight .ClickOn p:first-child {
  padding-left: 50px;
  background: url(../images/icon10.png) no-repeat center;
}

.ListContentUl .ListItemsRight .ClickOn:hover {
  border-color: transparent;
}

.ListContentUl .ListItemsRight .ClickOn:hover p {
  color: #fff;
}

.ListContentUl .ListItemsRight .ClickOn:hover p:first-child {
  background: url(../images/icon10.png) no-repeat center;
}

.ListContentUl .ListItemsRight .ItemsModle {
  width: 100%;
  height: auto;
}

.ListContentUl .ListItemsRight .ItemsModle .ItemsModle-Head {
  width: 100%;
  height: 20px;
  font-size: 13px;
  color: gray;
}

.ListContentUl .ListItemsRight .ItemsModle .ItemsModle-Head .Head-Floor span {
  margin-right: 10px;
}

.ListContentUl .ListItemsRight .ItemsModle .ItemsModle-Head .Head-Floor{
  margin-bottom: 10px;
}
.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li {
  position: relative;
  float: left;
  padding: 0 10px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-right: 1px solid #eef0f1;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li:last-child {
  border-right: none;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li span {
  cursor: pointer;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li span:hover {
  color: #00aaff;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li i {
  position: relative;
  top: 4px;
  right: -5px;
  display: inline-block;
  width: 0;
  height: 2px;
  border: solid;
  border-width: 4px;
  border-color: #8c8c8c transparent transparent transparent;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  margin-left: 1px;
  margin-right: 5px;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li .rotate {
  top: -3px;
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li .adminlist {
  position: absolute;
  left: 1px;
  top: 25px;
  width: 98px;
  min-height: 30px;
  border: 1px solid #c6c6cc;
  font-size: 12px;
  color: #595959;
  line-height: 2.5;
  text-align: center;
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000004;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li .adminlist p {
  height: 30px;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle li .adminlist p:hover {
  background-color: #ebeced;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .PostManagement {
  padding-left: 18px;
  background: url(../images/icon12.png) no-repeat center left;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .PostManagement:hover {
  background: url(../images/icon12_hover.png) no-repeat center left;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .PostManagement:hover i {
  border-color: #00aaff transparent transparent transparent;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle img {
  width: 12px;
  height: 12px;
  display: inline-block;
  position: relative;
  top: 1px;
  margin-right: 5px;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .Head-Moudle-Praise {
  padding-left: 15px;
  background: url(../images/icon11.png) no-repeat center left;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .Head-Moudle-Praise:hover {
  background: url(../images/icon11_hover.png) no-repeat center left;
  color: #0099e5;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .Head-Moudle-Praise-On {
  background: url(../images/icon11_hover.png) no-repeat center left;
  color: #0099e5;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .Head-Moudle-Reply {
  padding-left: 17px;
  background: url(../images/icon6.png) no-repeat center left;
}

.ListContentUl .ListItemsRight .ItemsModle .Head-Moudle .Head-Moudle-Reply:hover {
  background: url(../images/icon6_hover.png) no-repeat center left;
  color: #0099e5;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List {
  padding: 10px 10px;
  background: #f5f6f7;
  margin-top: 30px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-ListContent {
  width: 100%;
  height: 100%;
}
.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-ListContent ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  padding-left: 0px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-ListContent ul li {
  padding: 10px 0;
  border-bottom: 1px dotted #ddddde;
  margin-bottom: 0px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-ListContent ul li:last-child {
  border-bottom: none;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-items {
  width: 100%;
  height: auto;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-items-Pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-items-Pic img {
  width: 30px;
  height: 30px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent {
  width: 495px;
  height: auto;
  font-size: 12px;
  color: #333;
  margin-left: -25px;
  text-align: left;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent a {
  color: #0099e5;
  float: left;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent span {
  word-wrap: break-word;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent .MoudleItems-h5 {
  min-height: 15px;
  margin-bottom: 5px;
  line-height: 1.3;
  font-family: "Microsoft YaHei";
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent .MoudleItems-h5 .twouser {
  margin: 0 5px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent .MoudleItems-h5 b {
  font-style: normal;
  font-weight: normal;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .Itemsmoude-itemsContent .MoudleItems-info {
  color: #818181;
  float: left;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-List-More {
  margin-top: 0px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-ListContent-Jet {
  width: 100%;
  height: 30px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-List-Input {
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: 18px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-List-Input .ItemsMoudle-List-Input-Box {
  border: 1px solid #ddddde;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-List-Input .ItemsMoudle-List-Input-Box input {
  background: #fff;
  border: none;
  height: 10px;
  width: 509px;
  outline: none;
  padding: 12px;
}

.ListContentUl .ListItemsRight .ItemsMoudle-List .ItemsMoudle-List-Input .ItemsMoudle-List-Input-Set {
  width: 100%;
  height: 26px;
  margin-top: 15px;
}

.LidtEditor {
  position: relative;
  padding: 20px;
  height: 235px;
  text-align: right;
}

.LidtEditor #editorElem .w-e-text-container {
  height: 155px !important;
}

.LidtEditor #editorElem .w-e-toolbar {
  background: #fff !important;
}

.LidtEditor #editorElem .w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {
  padding: 3px;
}

.LidtEditor #editorElem .w-e-text {
  overflow-y: auto;
}

.LidtEditor #editorElem .w-e-icon-link {
  line-height: 1.5;
}

.ItemsMoudle-Page {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: left;
  font-size: 0;
  margin-top: 3px;
}


.ItemsMoudle-Page li {
  padding: 0 !important;
  border: none !important;
  list-style: none;
  display: inline-block;
  margin: 0;
}


.ItemsMoudle-Page li:first-child > a {
  margin-left: 0px;
}


.ItemsMoudle-Page .point a {
  border: none;
  cursor: default;
}


.ItemsMoudle-Page .point a:hover {
  background: none;
}


.ItemsMoudle-Page a {
  display: inline-block;
  width: 28px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #a7a7a7;
  border: 1px solid #ccc;
  margin-right: 4px;
  cursor: pointer;
  text-align: center;
}


.ItemsMoudle-Page a:hover {
  border-color: #00aaff;
  color: #00aaff;
}


.ItemsMoudle-Page .active a {
  color: #fff;
  cursor: default;
  border-color: #00aaff;
  background: #00aaff;
}


.ItemsMoudle-Page i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}


.ItemsMoudle-Page .page-button-disabled {
  background: #f7f9fa;
  cursor: not-allowed;
  color: #ddd !important;
  border-color: #e6e6e6;
}


.ItemsMoudle-Page .page-button-disabled:hover {
  background: #f7f9fa;
  border-color: #e6e6e6;
}

.ListContentUl li .ListItemsRight .ListItems-Detail-img {
  position: relative;
  width: 100%;
}

.ListContentUl li .ListItemsRight .ListItems-Detail-img .JDICont {
  position: relative;
  z-index: 4;
  max-height: 110px;
  width: 100%;
  overflow: hidden;
  text-align: left;
}

.ListContentUl li .ListItemsRight .imgList {
  position: relative;
  display: inline-block;
  max-width: 156px;
  height: 110px;
  overflow: hidden;
  margin-right: 10px;
}

.ListContentUl li .ListItemsRight .imgList .imgfd {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: transparent url(../images/icon-max.png) no-repeat center;
}

.ListContentUl li .ListItemsRight .imgList:hover .imgfd {
  display: inline-block;
}

.ListContentUl li .ListItemsRight .imgList img {
  display: inline-block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  max-height: 100%;
}
.ListContentUl .ListThumb {
  position: relative;
  margin-top: -110px;
  width: 632px;
  min-height: 100px;
  padding: 10px;
  background: #f7f7f7;
  border: 1px solid #e4e6eb;
  z-index: 5;
  cursor: normal;
}

.ListContentUl .ListThumb .thumbHead {
  height: 25px;
  width: 100%;
  border-bottom: 1px solid #e4e6eb;
  text-align: left;
}

.ListContentUl .ListThumb .thumbHead a {
  float: left;
  font-size: 12px;
  color: #2d64b3;
  text-align: left;
  box-sizing: content-box;
}

.ListContentUl .ListThumb .thumbHead a i {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../images/thread_list_z_eca48fe.png);
  background-position: 0px -30px;
}

.ListContentUl .ListThumb .thumbWarp {
  position: relative;
  width: 632px;
  height: 90%;
  padding: 1% 0;
  margin-top: 10px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ListContentUl .ListThumb .thumbWarp img {
  display: inline-block;
  max-width: 100%;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.ListContentUl .ListThumb .thumbWarp .thumbsx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.ListContentUl .ListThumb .thumbWarp .thumbsx:hover {
  cursor: normal;
  background: rgba(0, 0, 0, 0.05) url(../images/icon-mini.png) no-repeat center;
}

.ListContentUl .ListThumb .thumbWarp .thumbWarpList {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  width: 632px;
}

.ListContentUl .ListThumb .thumbWarp .thumbNext,
.ListContentUl .ListThumb .thumbWarp .thumbPrev {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  cursor: pointer;
  z-index: 6;
}

.ListContentUl .ListThumb .thumbWarp .thumbPrev {
  left: 0;
}

.ListContentUl .ListThumb .thumbWarp .thumbPrev:hover {
  background: rgba(0, 0, 0, 0.01) url(../images/icon-left.png) no-repeat center;
}

.ListContentUl .ListThumb .thumbWarp .thumbNext {
  right: 0;
}

.ListContentUl .ListThumb .thumbWarp .thumbNext:hover {
  background: rgba(0, 0, 0, 0.01) url(../images/icon-right.png) no-repeat center;
}

</style>